<template>
  <div class="m-financing">
    <div class="clearfix">
      <p class="fl m-title">我的融资</p>
      <div class="fr m-invest-btn">
        <w-button type="main" @on-click="$router.push('/finance')">融资申请</w-button>
      </div>
    </div>

    <div class="m-list">
      <w-tab-select :options="options" @on-change="_changeSelected">
        <!-- 搜索条件 -->
        <div class="m-search">
          <div class="item">
            <span class="title">{{curIndex == 1 ? '抵押状态' : '还款状态'}}：</span>
            <div class="m-input">
              <w-select></w-select>
            </div>
          </div>
          <div class="m-search-btn">
            <w-button type="main">查询</w-button>
          </div>
        </div>
        <!-- 搜索列表 -->
        <div class="m-table-list">
          <w-table :columns="columns()">
            <!-- 我的融资 -->
            <tr v-if="curIndex == 1">
              <td>
                <span>2018-09-12 14:52:20</span>
              </td>
              <td>
                <span>2018-09-12 15:40:02</span>
              </td>
              <td>
                <span>2019-09-12 10:00:00</span>
              </td>
              <td>
                <p>住房</p>
              </td>
              <td>
                <p>住房</p>
              </td>
              <td>
                <span>抵押中/已归还</span>
              </td>
            </tr>
            
            <!-- 我的抵押 -->
            <tr v-else>
              <td>
                <span>2018-09-12 10:42:38</span>
              </td>
              <td>
                <span>80000.00</span>
              </td>
              <td>
                <span>80000.00</span>
              </td>
              <td>
                <span>50000.00</span>
              </td>
              <td>
                <span>20%</span>
              </td>
              <td>
                <span>20%</span>
              </td>
              <td>
                <span>是/否</span>
              </td>
              <td>
                <p>住房</p>
              </td>
              <td>
                <span>已还款/待还款/放款中/审核成功/审核失败</span>
              </td>
              <!-- 审核失败，展示原因 -->
              <!-- <td colspan="9">
                <div class="m-mask-reson">
                  <span>审核失败原因</span>
                </div>
              </td> -->
            </tr>
          </w-table>
        </div>
      </w-tab-select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curIndex: 0,
      options: [
        {
          'label': '我的融资',
          'value': '我的融资'
        },
        {
          'label': '我的抵押',
          'value': '我的抵押'
        }
      ]
    }
  },
  methods: {
    /**
     * 切换选项卡
     */
    _changeSelected(index) {
      this.curIndex = index
    },
    /**
     * table标题
     */
    columns() {
      if (this.curIndex == 1) {
        return [
          {title: '申请时间', width: 'auto'},
          {title: '抵押开始时间', width: 'auto'},
          {title: '抵押结束时间', width: 'auto'},
          {title: '抵押物', width: 'auto'},
          {title: '描述', width: 'auto'},
          {title: '抵押状态', width: 'auto'}
        ]
      }
      return [
        {title: '申请时间', width: 'auto'},
        {title: '申请金额', width: 'auto'},
        {title: '实际金额', width: 'auto'},
        {title: '还款金额', width: 'auto'},
        {title: '年化利息', width: 'auto'},
        {title: '支付利息', width: 'auto'},
        {title: '是否抵押', width: 'auto'},
        {title: '抵押物', width: 'auto'},
        {title: '状态', width: 'auto'}
      ]
    }
  }
}
</script>

<style lang="scss">
.m-table-list {
  margin-top: 20px;
  table {
    th {
      height: 34px !important;
      background-color: #FAFAFA;
      border-bottom: none !important
    }
  }
}
.m-invest-btn {
  .btn {
    width: 76px;
    height: 30px;
  }
}
.m-search {
  .form-control {
    width: 180px;
    height: 30px;
  }
}
.m-search-btn {
  display: inline-block;
  .btn {
    width: 60px;
    height: 30px;
  }
}
.m-list {
  .m-tab-select {
    padding: 0
  }
}
</style>

<style lang="scss" scoped>
.m-title {
  font-size: 16px;
  font-weight: bold;
}
.m-search {
  .item {
    display: inline-block;
    margin-right: 30px;
    .title {
      font-size: 12px;
      display: inline-block;
    }
    .m-input {
      display: inline-block;
      & > div {
        display: inline-block;
      }
    }
  }
}
.m-table-list {
  // p {
  //   width: 100px;
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  //   white-space: nowrap;
  // }
}
.m-mask-reson {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: rgba(135, 135, 135,0.1);
  margin: -12px -8px -12px 0;
}
</style>
